<template>
	<view>
		<view class="address" @click="to('/pages/user/addresslist',{})">
			<view class="flex">
				<u-icon name="map-fill" color="#363636" size="17" label=" " labelColor="#363636"
					labelSize="14"></u-icon>
				<text style="font-weight: 800;margin:0 12rpx;">吴俊雄</text>
				<text style="font-weight: 550;">1357****190</text>
			</view>
			<view style="width:100%;display: flex;justify-content: flex-end;align-items: center;position: relative;">
				<u-icon name="arrow-right" color="#363636"
					:customStyle="{'position':'absolute','right':'-6rpx','top':'50%'}"></u-icon>
			</view>
			<view style="font-size: 26rpx;color:#363636;margin-top: 20rpx;font-weight: 450;">
				广东省广州市白云区同和同和新百嘉小区A栋303室xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
			</view>
		</view>

		<view class="card-view">
			<u-row justify="flex-start" v-for="(item,index) in projectList" :key="index"
				:customStyle="{'background':'#fff','margin-top':'10rpx','border-bottom':'2rpx solid #eee','padding-bottom':'10rpx'}"
				align="flex-start">
				<u-col span="3.5" :customStyle="{'text-align':'center'}">
					<image :src="item.icon" class="project-image"></image>
				</u-col>
				<u-col span="5" :customStyle="{'margin-left':'10rpx'}">
					<view style="display: flex;flex-direction: column;justify-content: space-between;height:120rpx;">
						<view class="project-title">{{item.name}}
							<view style="margin-left: 20rpx;">
								<u-icon name="clock" size="13" color="#999" labelSize="10" :label="item.timer+'分钟'"
									labelColor="#999"></u-icon>
							</view>
						</view>
						<view class="num-view">超{{item.num}}人选择</view>
						<view class="project-price">
							<view class="rmb-icon">￥</view>
							<view class="price-true">{{item.original}}</view>
						</view>
					</view>
				</u-col>
				<u-col span="3.4" justify="center" align="center" :customStyle="{'display':'flex','height':'120rpx'}">
					<u-number-box v-model="item.buycount" @input="changeInput" :integer="true" :step="1" :min="0"
						:max="99">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="12" color="#24c373"></u-icon>
						</view>
						<text slot="input" style="width: 15px;text-align: center;"
							class="input">{{item.buycount}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>
					</u-number-box>
				</u-col>
			</u-row>

			<view class="card-item">
				<view class="box">
					<label class="label">服务技师</label>
					<label>隔壁老王</label>
				</view>
				<view class="box">
					<label class="label">服务时间</label>
					<view style="display: flex;">
						<label style="color: #24c373;">12/3 21:00</label>
						<u-icon name="arrow-right" color="#24c373" size="14"></u-icon>
					</view>
				</view>
			</view>

			<view class="card-item">
				<view class="box">
					<label class="label">出行方式</label>
					<view style="display: flex;">
						<view class="tag-view" :class="{'success': tripmode === 1, 'info': tripmode !== 1}"
							@click="tripmode =1">滴滴/出租</view>
						<view class="tag-view" :class="{'success': tripmode === 2, 'info': tripmode !== 2}"
							@click="tripmode =2">公交/地铁</view>

					</view>
				</view>
				<view style="font-size: 24rpx;color:#999;width: 96%;margin:0 auto;">

					{{tripmode===1?'全程共1353.64公里,出租出行收取来回车费，白天起步12元，超过3公里每公里增加2.6元':'全程共1353.64公里,地铁出行收取来回车费，白天起步8元，超过3公里每公里增加4元'}}
				</view>
				<view class="box">
					<label class="label">车费</label>
					<label style="color:red;">￥56.49</label>
				</view>
				<view class="box">
					<label class="label">优惠券</label>
					<view style="display: flex;">
						<label style="color: #999;font-weight: 100;">无可用优惠券</label>
						<u-icon name="arrow-right" color="#000" size="14"></u-icon>
					</view>
				</view>
				<view class="box">
					<label class="label">备注</label>
					<view style="display: flex;font-weight: 100;">
						<u-input type="text" placeholder="选填" border="none" inputAlign="right"></u-input>
						<u-icon name="arrow-right" color="#000" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="title-top" style="">支付方式</view>
		<u-alert :title="title" type="warning" description="禁止现金或转账交易,仅限在平台交易,如有发现可向平台反馈" showIcon
			style="width: 94%;margin: 0 auto;"></u-alert>
		<view class="card-view no-border-top" style="margin-top: 0rpx;">
			<view class="card-item">
				<view class="pay-box" @click="changePay(0)">
					<label class="label" style="display: flex;align-items: center;">
						<u-icon name="rmb-circle-fill" color="#fec947" size="22"></u-icon>
						<text class="ml-10">余额支付(余额:126)</text>
					</label>
					<view style="display: flex;font-weight: 100;">
						<u-icon :name="payChecked==0?'checkmark-circle-fill':'checkmark-circle'"
							:color="payChecked==0?'#24c373':'#999'" size="22"></u-icon>
					</view>
				</view>
				<view class="pay-box" @click="changePay(1)">
					<label class="label" style="display: flex;align-items: center;">
						<u-icon name="weixin-circle-fill" color="#24c373" size="22"></u-icon>
						<text class="ml-10">微信支付</text>
					</label>
					<view style="display: flex;font-weight: 100;">
						<u-icon :name="payChecked==1?'checkmark-circle-fill':'checkmark-circle'"
							:color="payChecked==1?'#24c373':'#999'" size="22"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view style="width:100%;height: 150rpx;"></view>

		<view class="bottom-view">
			<view class="bottom-item">
				<view style="display: flex;align-items: center;color:red;">
					<label style="font-size: 24rpx;">合记:</label>
					<label style="font-weight: bold;font-size: 36rpx;">￥7243.00</label>
				</view>
				<view class="button-view btn-push" @click="to('/pages/order/create',{})">
					提交订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tripmode: 1,
				payChecked: 0,
				show: false,
				sortCurr: 0,
				projectList: [{
						name: '中式按摩',
						icon: '../../static/project/a.png',
						tips: '缓解颈椎,腰肌劳损',
						original: '318',
						price: '218',
						num: '26587',
						tag: '',
						timer: '60',
						buycount: 1
					}

				]
			}
		},
		onLoad({
			order,
			name
		}) {
			console.log('e', e);
		},
		methods: {
			changePay(index) {
				this.payChecked = index;
			},
			changeSort(index) {
				this.sortCurr = index;
			},
			close() {
				this.show = false;
			},
			changeInput(e) {
				console.log(e);
			},
			to(url, params) {
				uni.navigateTo({
					url: url,
					data: params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 96%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		height: 70rpx;
		line-height: 70rpx;
	}

	.label {
		color: #000;
		font-weight: 530;
	}

	.pay-box {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 10rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 550;
	}

	.title-top {
		width: 94%;
		margin: 20rpx auto;
		font-weight: bold;
		color: #999;
		// margin-top: 50rpx;
		background: #eee;
		font-size: 28rpx;
	}


	.address {
		width: 94%;
		margin: 0 auto;
		background: #fff;
		padding: 20rpx 15rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.card-view {
		width: 94%;
		margin: 0 auto;
		background: #fff;
		border-radius: 20rpx;
		padding-top: 10rpx;
		margin-top: 30rpx;
	}

	.no-border-top {
		border-top-right-radius: 0;
		border-top-left-radius: 0;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #24c373;
		color: #24c373;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #24c373;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	@import url('create.css');
</style>